<template>
  <div class="ui-container">
    <span
      v-for="item in 5"
      :key="item"
      :class="['iconfont icon-star', item <= starNum ? 'active': '']"
      @click="setStarNum(item)"
    ></span>
  </div>
</template>

<script lang="ts" setup>
import {useStars} from "@/hook";
const props = defineProps({
  size: Number,
  num: Number
})
const emit = defineEmits(['getStarNum'])
const [ starNum, setStarNum ] = useStars(props.num, () => {
  emit('getStarNum', starNum.value)
})
</script>

<style scoped lang="scss">
@font-face {
  font-family: "iconfont"; /* Project id 4042051 */
  src: url('//at.alicdn.com/t/c/font_4042051_fyf9x1z9vvg.woff2?t=1682573172584') format('woff2'),
  url('//at.alicdn.com/t/c/font_4042051_fyf9x1z9vvg.woff?t=1682573172584') format('woff'),
  url('//at.alicdn.com/t/c/font_4042051_fyf9x1z9vvg.ttf?t=1682573172584') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #999999;
  transition: color 0.5s;
  &.icon-star:before {
    content: "\e6f4";
  }
  &.active {
    color: #e6a23c;
  }
}



</style>